import React, {useState} from 'react';
import {Row, Col, Button, Menu, message, Checkbox, Input} from 'antd';
import {PictureOutlined} from '@ant-design/icons';
import MDEditor from '@uiw/react-md-editor';
import './BlogWriter.css';

const BlogWriter = () => {
    const [markdown, setMarkdown] = useState('');
    const [blogTitle, setBlogTitle] = useState('');
    const handleMenuClick = ({key}) => {
        let snippet = '';
        switch (key) {
            case 'h1':
                snippet = '# 标题 1\n';
                break;
            case 'h2':
                snippet = '## 标题 2\n';
                break;
            case 'h3':
                snippet = '### 标题 3\n';
                break;
            case 'codeblock':
                snippet = '```javascript\nconsole.log("Hello World!");\n```\n';
                break;
            case 'table':
                snippet =
                    '| 表头 1 | 表头 2 |\n| --- | --- |\n| 单元格 1 | 单元格 2 |\n';
                break;
            case 'blockquote':
                snippet = '> 引用文字\n';
                break;
            case 'image':
                document.getElementById('hiddenImageInput').click();
                return;
            default:
                message.error('未知操作');
                return;
        }
        setMarkdown(prevMarkdown => prevMarkdown + snippet);
    };
    const exportMarkdown = () => {
        if (!blogTitle.trim()) {
            message.error('请输入文件名');
            return;
        }
        const filename = `${blogTitle}.md`;
        const blob = new Blob([markdown], {type: 'text/plain;charset=utf-8'});
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        link.click();
        URL.revokeObjectURL(url);
    };
    const insertImage = event => {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            setMarkdown(
                prevMarkdown => prevMarkdown + `![${file.name}](${reader.result})\n`
            );
        };
        reader.onerror = error => {
            message.error('无法读取图片');
        };
    };

    const menu = (
        <Menu onClick={handleMenuClick}>
            <Menu.Item key='h1'>H1</Menu.Item>
            <Menu.Item key='h2'>H2</Menu.Item>
            <Menu.Item key='h3'>H3</Menu.Item>
            <Menu.Item key='codeblock'>代码块</Menu.Item>
            <Menu.Item key='table'>表格</Menu.Item>
            <Menu.Item key='blockquote'>引用文字</Menu.Item>
            <Menu.Item
                key='image'
                icon={<PictureOutlined/>}>
                图片
            </Menu.Item>
        </Menu>
    );

    return (
        <Row>
            <Col span={24}>
                <div className='toolbar'>
                    <h2 className='title'>Markdown博客编辑器</h2>
                    <div className='toolbarButtons'>
                        <Button
                            className='toolbarButton'
                            onClick={exportMarkdown}>
                            导出
                        </Button>
                        <Button
                            className='toolbarButton'
                            onClick={() => message.info('入库功能未实现')}>
                            入库
                        </Button>
                    </div>
                    <Checkbox className='exportOption'>将本文作为全站导出篇目</Checkbox>
                </div>
                <Input
                    className='blogTitleInput'
                    placeholder='请输入博客名称'
                    value={blogTitle}
                    onChange={e => setBlogTitle(e.target.value)}
                />
                <div className='featureIntro'>
                    <p>
                        这是一个基于React和Ant
                        Design的Markdown博客编辑器。您可以在左侧编辑区域编写Markdown文档，并实时查看渲染效果。编辑器支持常用的Markdown语法，包括标题、列表、引用、表格、代码块等。同时，您还可以通过工具栏快速插入不同类型的元素。编辑完成后，您可以通过导出按钮将文档保存为Markdown文件。
                        <br/>
                        <p style={{color: 'red'}}>点击编辑器右上角按钮可以全屏哦</p>
                    </p>
                </div>
                <input
                    type='file'
                    id='hiddenImageInput'
                    accept='image/*'
                    onChange={insertImage}
                    style={{display: 'none'}}
                />
                <MDEditor
                    className='mdEditor'
                    value={markdown}
                    onChange={setMarkdown}
                />
            </Col>
        </Row>
    );
};

export default BlogWriter;
